import { View, Image, Text, Button } from "@tarojs/components";
import img_grzx_tx from "@/assets/image/img_grzx_tx.png";
import menuOne from "@/assets/image/ico_grzx_list_sjrz.svg";
import menuTwo from "@/assets/image/ico_grzx_list_ptxx.svg";
import menuThree from "@/assets/image/ico_grzx_list_wdsc.svg";
import menuFour from "@/assets/image/ico_grzx_list_ptgl.svg";
import arrayIcon from "@/assets/image/ico_jiantou_one.svg";
import "./index.scss";
import clsx from "clsx";
import { link, linkWithParams } from "@/helper/utils";
import { routes } from "@/constants/routes";
import { getGlobalData, setGlobalData } from "@/global_data";
import {  useMemo, useState } from "react";
import { getUserInfo, indexGetDetail } from "@/services/entities/all";
import { useDidShow } from "@tarojs/taro";
import Taro from "@tarojs/taro";

const MyPage = () => {
  const [userData, setUserData] = useState<any>({ auth: false });
  const [isLogin, setIsLogin] = useState(false);
  const userInfo = getGlobalData("userInfo");
  const [avatar, setAvatar] = useState(Taro.getStorageSync("avatar"));

  const getDetail = (resData) => {
    const { storeId, openId } = resData;
    if (!storeId) {
      return;
    }
    indexGetDetail({ storeId, openId }).then((res: any) => {
      setUserData((old) => {
        return { ...old, nickName: res.name };
      });
      setGlobalData("userShopName", res.name);
    });
  };

  const hasLogin = () => {
    if (!userInfo?.headimgurl || !userInfo.phone) {
      return false;
    }
    return true;
  };

  const toLogin = () => {
    linkWithParams(routes.ROUTES_LOGIN, { action: "back" });
  };

  useDidShow(() => {
    setIsLogin(hasLogin());
    if (!!userInfo?.sessionKey) {
      getUserInfo({ openId: userInfo?.openId }).then((res) => {
        console.log("getUserInfo", res);
        setUserData(res);
        getDetail(res);
      });
    }
  });

  const verifySuccess = useMemo(() => {
    return userData.auth;
  }, [userData]);

  const isAdmin = useMemo(() => {
    return userData.isAdmin;
  }, [userData]);

  const clickVerify = () => {
    if (!hasLogin()) {
      toLogin();
    }

    if (!isLogin) {
      return;
    }
    link(routes.ROUTES_VERIFY);
  };

  const clickModifyVerify = () => {
    const { storeId, openId } = userData;
    linkWithParams(routes.ROUTES_VERIFY, { storeId, openId });
  };

  return (
    <View className="my-container bg-page">
      <View className="header pl-46 pt-32 border-box">
        <View className="dis-flex align-center">
          <Button
            className="button-origin-transparent"
            openType="chooseAvatar"
            onChooseAvatar={(e) => {
              Taro.setStorageSync("avatar", e.detail.avatarUrl);
              setAvatar(e.detail.avatarUrl);
            }}
          >
            <Image
              className="avatar"
              src={
                isLogin ? (!!avatar ? avatar : userData.headimgurl) : img_grzx_tx
              }
            />
          </Button>
          <View className="flex-column ml-20">
            <View className="dis-flex align-center">
              <View
                className="fs-34 lh-48 cl-white"
                onClick={() => {
                  if (!isLogin) {
                    link(routes.ROUTES_INIT);
                  }
                }}
              >
                {isLogin
                  ? userData.nickName
                    ? userData.nickName
                    : "微信用户"
                  : "点击登录"}
              </View>
              {isLogin && (
                <View
                  className={clsx(
                    "verify ml-12 pd-lr-20 dis-flex align-center fs-20 cl-white",
                    verifySuccess ? "bg-4EBE6F" : "bg-E14848"
                  )}
                >
                  {verifySuccess ? "已认证商家" : "未认证"}
                </View>
              )}
            </View>
            {/* <View className="mt-20 dis-flex align-center">
              <Image className="business-icon" src={business} />
              <Text className="ml-8 fs-22 lh-32 cl-white"></Text>
            </View> */}
          </View>
        </View>
      </View>
      <View className="main">
        <View className="content dis-flex justify-center">
          <View className="menu-container flex-column">
            <View className="menu pd-lr-24 border-box flex-column">
              <View className="border-bottom dis-flex align-center justify-between pd-tb-38 border-box">
                <View className="dis-flex align-center">
                  <Image className="menu-icon" src={menuOne} />
                  <Text className="ml-16 fs-30 lh-40 color-black">
                    商家认证
                  </Text>
                </View>
                {isLogin && verifySuccess ? (
                  <View
                    className="dis-flex align-center"
                    onClick={clickModifyVerify}
                  >
                    <Text className="ml-16 fs-30 lh-40 cl-5FC755">已认证</Text>
                    <Image className="array-icon ml-12" src={arrayIcon} />
                  </View>
                ) : (
                  <View
                    className="dis-flex align-center justify-end"
                    onClick={clickVerify}
                  >
                    <Text className="ml-16 fs-30 lh-40 cl-E14848">未认证</Text>
                    <Image className="array-icon ml-12" src={arrayIcon} />
                  </View>
                )}
              </View>
              <View
                className="dis-flex align-center justify-between pd-tb-38 border-box"
                onClick={() => {
                  if (!verifySuccess) {
                    return;
                  }
                  const user = getGlobalData("userInfo");
                  console.log("user", user);
                  linkWithParams(routes.ROUTES_MERCHANT, {
                    storeId: userData.storeId,
                  });
                }}
              >
                <View className="dis-flex align-center">
                  <Image className="menu-icon" src={menuTwo} />
                  <Text className="ml-16 fs-30 lh-40 color-black">
                    商家经营
                  </Text>
                </View>
                <View className="dis-flex align-center">
                  <Image className="array-icon ml-12" src={arrayIcon} />
                </View>
              </View>
            </View>
            <View
              className="menu mt-16 pd-lr-24 pd-tb-38 border-box dis-flex align-center justify-between"
              onClick={() => {
                if (!isLogin) {
                  return;
                }
                link(routes.ROUTES_COLLECT);
              }}
            >
              <View className="dis-flex align-center">
                <Image className="menu-icon" src={menuThree} />
                <Text className="ml-16 fs-30 lh-40 color-black">我的收藏</Text>
              </View>
              <View className="dis-flex align-center">
                <Image className="array-icon ml-12" src={arrayIcon} />
              </View>
            </View>
            {isAdmin && (
              <View
                className="menu mt-16 pd-lr-24 pd-tb-38 border-box dis-flex align-center justify-between"
                onClick={() => {
                  if (!isLogin) {
                    return;
                  }
                  link(routes.ROUTES_PLATFORM);
                }}
              >
                <View className="dis-flex align-center">
                  <Image className="menu-icon" src={menuFour} />
                  <Text className="ml-16 fs-30 lh-40 color-black">
                    平台管理
                  </Text>
                </View>
                <View className="dis-flex align-center">
                  <Image className="array-icon ml-12" src={arrayIcon} />
                </View>
              </View>
            )}
            {/* <View className="width-full dis-flex justify-center">
              {isLogin && (
                <View
                  className="exit dis-flex align-center justify-center mt-80 fs-28 cl-white"
                  onClick={exit}
                >
                  退出登录
                </View>
              )}
            </View> */}
          </View>
        </View>
      </View>
    </View>
  );
};

export default MyPage;
